{extend name="Layout/layout" /}
{block name="head_foot"}
<style type="text/css">
    .radio-group input:first-child{margin:0;}
    .radio-group input { margin-left:10px; margin-right: 3px; vertical-align: middle;}
    .form-horizontal { padding:10px 0;}
    .form-horizontal label {display:inline;}
    .form-horizontal input { width:auto; display: inline;}
</style>
{/block}
{block name="body_content"}
<div class="container" style="margin:10px auto;">
    <img src="/Skin/Theme/Shuka189/Images/zhifu_03.jpg" alt="" /><img src="/Skin/Theme/Shuka189/Images/zhifu_04.jpg" alt="" /><img src="/Skin/Theme/Shuka189/Images/zhifu_05.jpg" alt="" /><img src="/Skin/Theme/Shuka189/Images/zhifu_06.jpg" alt="" />
</div>
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <a href="{:U('Product/detail','id='.$data['id'])}"><img src="/Skin/Theme/Shuka189/Images/20150203110006.jpg" alt="" /></a>
            <br />产品面值：{$data.price}元
            <br />产品类型：卡密
        </div>
        <form method="post" action="{:U('Shoppingcart/create')}">
            <div class="col-md-9">
                <h3 style="color:#F60">{$data.title}</h3>
                <div class="panel panel-warning">
                    <div class="panel-heading">商品说明</div>
                    <div class="panel-body">
                        {$data.summary}
                    </div>
                </div>
                <div style="line-height:30px;">
                    购买价格：{$data.price}元<br />
                    会员价格：{$data.price}元
                </div>
                <div class="form-group" style="margin:10px 0;">
                    <label class="radio-inline">
                        <input type="radio" name="is_member" value="0" checked="checked" required="required"> 非会员
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="is_member" value="1" required="required"> 会员
                    </label>
                </div>
                <div class="panel panel-warning" id="frmVisitor">
                    <div class="panel-body">
                        <div>
                            真实姓名：
                            <input type="text" name="real_name" required="required" placeholder="真实姓名" />
                        </div>
                        <div style="margin-top:5px;">
                            电子邮件：
                            <input type="text" name="email" required="required" placeholder="电子邮件" />
                        </div>
                    </div>
                </div>
                <div class="panel panel-warning" id="frmMember" style="display:none;">
                    <div class="panel-body">
                        <div>
                            会员帐号：
                            <input type="text" name="user_name" placeholder="会员帐号" />
                        </div>
                        <div style="margin-top:5px;">
                            会员密码：
                            <input type="password" name="password" placeholder="会员密码" />
                        </div>
                    </div>
                </div>
                <div style="margin-bottom:10px;">数量：<input type="number" id="number" name="number" value="1" data-price="{$data.price}" required="required" placeholder="数量" /></div>
                <div style="color:#F00; line-height:21px;">
                    <strong>总价：<span id="total">{$data.price}</span>元</strong>
                    <div style="font-size: 10px">
                        1、购物前请确认商品是否为本人所需，谨防受骗！<br />
                        2、订单信息请妥善保管，不得外泄！<br />
                        3、本站无兼职！无刷信！！<br />
                        4、因本站提供的都是虚拟产品，在产品无误的情况下，不提供退换货服务！
                    </div>
                </div>
                <div>
                    <ul class="nav nav-tabs">
                        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">平台支付</a></li>
                        <!--<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">环迅支付</a></li>-->
                    </ul>
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="home" style="padding:10px 0;">
                            <label>
                                <span>
                                    <input type="radio" name="pay_method" value="alipay" data-payname="支付宝" data-limit="3000.00" checked="checked" />
                                </span>
                                <img width="128" height="38" src="/Skin/Theme/Shuka189/Images/zhifubaopay.png" alt="支付宝" title="支付宝">
                            </label>
                        </div>
                        <!--<div role="tabpanel" class="tab-pane" id="profile">2...</div>-->
                    </div>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" required="required" value="ok">
                        我已经填写无误切同意购买此订单的商品并以熟知安全条款《<a href="{:U('Fengxian/index')}" target="_blank">网络购物风险提示</a>》
                    </label>
                </div>
                <div style="margin:20px 0; text-align: right;"><button type="submit" class="btn btn-danger btn-large">提交订单</button></div>
            </div>
            <input type="hidden" name="id" value="{$data.id}" />
            <input type="hidden" name="price" value="{$data.price}" />
        </form>
    </div>
</div>
{/block}
{block name="body_foot"}
<script>
    $('#number').change(function () {
        var total = $(this).val() * $(this).data('price');
        $('#total').text(total);
    })
    $('[name="ismember"]').click(function () {
        if ('yes' == $(this).val()) {
            $('#frmVisitor').hide().find('input').prop('required', false);
            $('#frmMember').show().find('input').prop('required', true);
        } else {
            $('#frmVisitor').show().find('input').prop('required', true);
            $('#frmMember').hide().find('input').prop('required', false);

        }
    })
</script>
{/block}